import React, { useEffect, useState } from 'react'
import {getTable,changeShow,delRow} from '../../../api/right-manageApi'

import {
    ExclamationCircleOutlined
} from '@ant-design/icons';
import { Table, Tag, Button, Modal,Switch ,message} from 'antd';
const { confirm } = Modal;

export default function RightList() {
    const [dataSource, setdatasource] = useState([])
    // 副作用函数
    useEffect(() => {
        getList()
    }, [])
    // 获取数据
    const getList = () => {
        getTable().then((res) => {
            setdatasource(res.data)
        });
    }
    // 表头
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            }
        },
        {
            title: '权限名称',
            dataIndex: 'title',
        },
        {
            title: '权限路径',
            dataIndex: 'routeKey',
            render: (routeKey) => {
                return <Tag color="processing">{routeKey}</Tag>
            }
        },
        {
            title: '操作',
            render: (item) => {
                return (
                    <div>
                        <Button style={{ margin: '0 10px' }}
                            type="primary"
                            size='small'
                            danger
                            onClick={() => onDelete(item)}
                        >删除</Button>
                        <Switch defaultChecked
                            checked={item.pagepermisson}
                            disabled={item.pagepermisson === 2}
                            onChange={()=>switchMethod(item)}
                        />
                    </div>
                )
            }
        },
    ];
    // 删除按钮回调
    function onDelete(item) {
        confirm({
            title: '你确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteItem(item)
            },
            onCancel() {
            },
        });
    }
    // 删除操作
    const deleteItem = (item) => {
        delRow(item.id).then((res) => {
            console.log(res);
            if (res.code === 0) {
                message.success("删除成功！")
            } 
            getList()
        })
    }
    // 编辑按钮配置
    const switchMethod = (item) => { 
        item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
        //由于是item是引用型的，全局都在用同一个item，所以item发生改变就会导致所有的都改
        // console.log(item)
        //因为原来dataSource已经受影响了，这里直接解构修改就行了
        setdatasource([...dataSource])
        // 发送请求修改
        changeShow({
            id: parseInt(item.id),
            pagepermisson: parseInt(item.pagepermisson)
        }).then(() => {
            getList()
        })
    }
    return (
        <div>
                <Table dataSource={dataSource}
                    columns={columns}
                    rowKey={item => item.routeKey}
                // scroll={{
                //     y: 500,
                // }}
                />
        </div>
    )
}
